<template>
  <div class="mod-menu">
    <div class="mod-menu-top">
      <el-button size="small" v-perm:sys:menu:save type="primary" @click="onAdd()">新增</el-button>
    </div>

    <el-table
      ref="table"
      :data="dataList"
      row-key="menuId"
      :expand-row-keys="expandRowKeys"
      border
      size="mini"
      style="width: 100%;">
      <el-table-column
        prop="name"
        header-align="center"
        min-width="150"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="parentName"
        header-align="center"
        align="center"
        width="120"
        label="上级菜单">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="图标">
        <template slot-scope="scope">
          <my-icon :name="scope.row.icon || ''"></my-icon>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        header-align="center"
        align="center"
        label="类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
          <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
          <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderNum"
        header-align="center"
        align="center"
        label="排序号">
      </el-table-column>
      <el-table-column
        prop="state"
        header-align="center"
        align="center"
        width="180"
        label="状态">
        <template slot-scope="{row}">
          <!--  <tag-status :value="row.state" mapper="menuStatusMap"></tag-status>-->
          <el-switch :value="row.state"
                     :disabled="!$hasPerm('sys:menu:update')"
                     @input="onSwitch(row)"
                     active-text="正常"
                     inactive-text="禁用"
                     active-color="#13ce66"
                     inactive-color="#ff4949"
                     active-value="0"
                     inactive-value="1"></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="url"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        label="菜单URL">
      </el-table-column>
      <el-table-column
        prop="perms"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        label="授权标识">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button v-perm:sys:menu:update type="text" icon="el-icon-edit" size="small" @click="onEdit(scope.row.menuId)">修改</el-button>
          <el-button v-perm:sys:menu:delete type="text" icon="el-icon-remove" class="btn-danger" size="small" @click="deleteHandle(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗 -->
    <simple-dialog v-bind.sync="dialog" @on-ok="onDialogOk"/>
  </div>
</template>

<script>
import edit from '@/components/modules/menu/edit'
import simpleDialog from '@/components/common/dialog/simple-dialog'
import dialogMixin from '@/components/common/dialog/dialog-mixin'
import {getSysMenuListAll, postSysMenuDeleteMenuId, postSysMenuUpdateState} from '$my/code/api/sys-menu'
import {treeDataTranslate} from '@/utils'


export default {
  mixins: [dialogMixin],
  components: {
    simpleDialog
  },
  data() {
    return {
      dataForm: {},
      dataList: [],
      dataListLoading: false,
      addOrUpdateVisible: false,
      expandRowKeys: []
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    reload() {
      this.getDataList()
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      getSysMenuListAll().then(data => {
        const tree = treeDataTranslate(data, 'menuId')
        const rowKeys = this.expandKeys(tree, 1)
        this.dataList = tree
        this.expandRowKeys = rowKeys

        this.$nextTick(_ => {
          rowKeys.forEach(o => {
            this.$refs.table && this.$refs.table.toggleRowExpansion({menuId: o, expanded: false}, true)
          })
        })
      })
    },

    expandKeys(tree, level, maxLevel = 1) {
      let keys = []
      if (level > maxLevel) return []
      tree.forEach(item => {
        keys.push(item.menuId)
        if (item.children && item.children.length > 0) {
          keys = keys.concat(this.expandKeys(item.children, level + 1))
        }
      })
      return keys
    },
    onAdd() {
      this.setDialog({
        title: '新增角色',
        comp: edit,
        props: {}
      })
    },
    onEdit(id) {
      this.setDialog({
        title: '编辑角色',
        comp: edit,
        props: {
          id
        }
      })
    },
    // 删除
    deleteHandle(row) {
      const {menuId, name} = row
      this.$confirm(`确定对菜单[${name}]进行[删除]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postSysMenuDeleteMenuId(menuId).then(_ => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList()
            }
          })
        })

      }).catch(e => {
        throw e
      })
    },
    onSwitch(row) {
      const mapper = {
        0: '1',
        1: '0'
      }
      let {state, menuId} = row
      state = mapper[state]
      postSysMenuUpdateState({menuId, state}).then(res => {
        if (res) {
          this.reload()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mod-menu {
  &-top {
    box-sizing: border-box;
    padding: 10px;
    text-align: right;
  }
}
</style>
